import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    Rectangle {
        id: rectange
        width: 500
        height: 500
        x:30
        y:30
        color: "linen"

            TextInput {
                id: input1
                x: 8; y: 8
                width: 96; height: 20
//                focus: true
                text: "Text Input 1"
            }

            TextInput {
                id: input2
                x: 8; y: 36
                width: 96; height: 20
                text: "Text Input 2"
            }

            //按键向导
            TextInput {
                id: input3
                x: 8; y: 64
                width: 96; height: 20
//                focus: true
                text: "Text Input 3"
                KeyNavigation.tab: input2   //KeyNavigation 按键向导 tab 跳转input2
            }

            //焦点区域,一个输入框
            FocusScope {
                    width: 96; height: input1.height + 8
                    x:8;y:92
                    Rectangle {
                        anchors.fill: parent
                        color: "lightsteelblue"
                        border.color: "gray"
                    }

                    TextInput {
                        id: input4
                        anchors.fill: parent
                        anchors.margins: 4
//                        focus: true
                        text: "Text Input 4"
                    }
            }

            //文本编辑（TextEdit）
            FocusScope {
               width: 96; height: 96
               x:8;y:130

                    Rectangle {
                    anchors.fill: parent
                    color: "lightsteelblue"
                    border.color: "gray"
                }

                TextEdit {
                    id: input
                    anchors.fill: parent
                    anchors.margins: 4
//                    focus: true
                }
            }

            //按键元素
            DarkSquare {
                width: 400; height: 200
                RedSquare {
                    id: square
                    x: 8; y: 8
                }
                focus: true
                Keys.onLeftPressed: square.x -= 8
                Keys.onRightPressed: square.x += 8
                Keys.onUpPressed: square.y -= 8
                Keys.onDownPressed: square.y += 8
                Keys.onPressed: {
                    switch(event.key) {
                        case Qt.Key_Plus:
                        square.scale += 0.2
                        break;
                        case Qt.Key_Minus:
                        square.scale -= 0.2
                        break;
                    }
                }
            }
    }

}


